import React,{useEffect,useState} from "react";
import {getData} from "../api";
import {Button, Timeline} from 'antd';
import {TimeLineComp} from "../components/timeLineComponents/TimeLineComp";
import "./index.css"
/**
 * A recreation of this demo:
 */
import { Chart } from '@antv/g2';





export const MainPage = () => {

    const [committerList, setCommitterList] = useState(null);

    const [skeletonActive, setSkeletonActive] = useState(true);

    const getCommitter = ()=>{
        setSkeletonActive(true);
        getData().then(res=>{
            let commitList =  res.data.map(item=>{
                setSkeletonActive(false);
                return {
                    date:item.commit.committer['date'],
                    message:item.commit.message
                }
            });
            // console.log(result);

            setCommitterList(commitList)
        })
    }

    useEffect(() => {
        getCommitter();
    }, []);


    return (
        <>

            <div style={{width:'80vw',margin:'0 auto',marginTop:'64px'}}>
                <TimeLineComp data={committerList} active={skeletonActive}/>
            </div>


        </>
    )
}